$(function () {
  // 发布文章

  // 获取文章分类列表数据
  function loadCateList () {
    $.ajax({
      type: 'get',
      url: 'my/article/cates',
      success: function (res) {
        if (res.status === 0) {
          // 获取列表数据
          var tags = template('cate-tpl', res)
          $('#cate').html(tags)
          // layui要求动态的表单数据必须手动调用render方法
          layui.form.render('select')
        } else {
          layer.msg(res.message)
        }
      }
    })
  }
  loadCateList()

  // 初始化富文本
  initEditor()

  // 页面打开时进行预览
  var $img = $('#image')
  var options = {
    // 纵横比
    aspectRatio: 400 / 280,
    // 预览的区域
    preview: '.img-preview'
  }
  $img.cropper(options)

  // 控制封面图片的选择
  $('#select-btn').click(function () {
    $('#myfile').click()
  })
  // 监听文件的选中行为
  $('#myfile').change(function (e) {
    var file = e.target.files[0]
    if (file) {
      // 选中的文件，生成一个预览地址
      var url = URL.createObjectURL(file)
      // 先销毁之前的选区，再更新图片地址，最后重新生成选区
      $img.cropper('destroy')
          .attr('src', url)
          .cropper(options)
    }
  })

  var state = ''
  $('#btnPublish').click(function () {
    state = '已发布'
  })
  $('#btnSave').click(function () {
    state = '草稿'
  })

  // 控制表单提交
  $('#add-form').submit(function (e) {
    e.preventDefault()
    // 提交表单：基于FormData进行提交(需要上传文件)
    var fd = new FormData(this)
    // console.log(fd.get('title'))
    // console.log(fd.get('content'))
    // console.log(fd.get('cate_id'))

    // 获取封面图数据
    $img.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
      width: 400,
      height: 280
    })
    .toBlob(function(blob) { 
      // 将 Canvas 画布上的内容，转化为文件对象
      // 这里的blob类似于直接通过file标签选中的文件对象
      fd.append('cover_img', blob)
      // 获取状态数据
      fd.append('state', state)

      // 调用接口提交数据
      $.ajax({
        type: 'post',
        url: 'my/article/add',
        data: fd,
        // 强制使用form-data的二进制格式上传文件
        processData: false,
        // 强制设置form-data参数格式
        contentType: false,
        success: function (res) {
          layer.msg(res.message)
        }
      })
    })
  })
})